<template>
  <div class="inquiryCreate">
    <h2 class="inquiryCreate-h">询价单</h2>
    <a-form
      :form="form"
      @submit="handleSubmit"
    >
      <a-row class="cont-top">
        <a-col :span="18">
          <div class="cont-top-div">
            <h3 class="inquiry-title">询价信息</h3>
            <a-row class="cont-top">
              <a-col :span="6">
                <a-form-item
                  :wrapper-col="{ span: 23 }"
                  label="询价单号"
                >
                  <a-input
                    disabled
                    placeholder="待生成"
                    v-decorator="['id']"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item
                  :wrapper-col="{ span: 23 }"
                  label="询价单标题"
                >
                  <a-input
                    v-decorator="[
                      'title',
                      {rules: [{ required: true, message: '请输入询价单标题' }]}
                    ]"
                    placeholder="询价单标题"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item
                  :wrapper-col="{ span: 23 }"
                  label="询价截止日期"
                >
                  <a-date-picker v-decorator="[
                      'inquirydeadline',
                      {rules: [{ required: true, message: '请选择询价截止日期' }]}
                    ]" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item
                  :wrapper-col="{ span: 23 }"
                  label="需求部门"
                >
                  <a-select
                    @change="handleChange"
                    v-decorator="[
                      'demandDepartment',
                    {rules: [{ required: true, message: '请选择需求部门' }]}
                    ]"
                    placeholder="请选择需求部门"
                  >
                    <a-select-option value="采购部门1">采购部门1</a-select-option>
                    <a-select-option value="采购部门2">采购部门2</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <a-form-item
                  :wrapper-col="{ span: 23 }"
                  label="成本中心"
                >
                  <a-input
                    v-decorator="[
                      'costCenter'
                    ]"
                    placeholder="成本中心"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item
                  :wrapper-col="{ span: 23 }"
                  label="联系信息"
                >
                  <a-input
                    @click="showModal"
                    v-decorator="[
                      'contact',
                      {rules: [{ required: true, message: '请选择联系信息' }]}
                    ]"
                    read-only
                    placeholder="请选择联系信息"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <h3 class="inquiry-title">报价要求</h3>
            <a-row>
              <a-col :span="6">
                <a-form-item
                  :wrapper-col="{ span: 23 }"
                  label="报价有效期(天)"
                >
                  <a-input
                    placeholder="报价有效期"
                    v-decorator="['days']"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item
                  :wrapper-col="{ span: 23 }"
                  label="税率要求"
                >
                  <a-select
                    @change="handleChange"
                    v-decorator="['requirement']"
                    placeholder="请选择税率要求"
                  >
                    <a-select-option value="0.06">6%</a-select-option>
                    <a-select-option value="0.09">9%</a-select-option>
                    <a-select-option value="0.1">10%</a-select-option>
                    <a-select-option value="0.13">13%</a-select-option>
                    <a-select-option value="0.16">16%</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item
                  :wrapper-col="{ span: 23 }"
                  label="报价有效期"
                >
                  <a-date-picker v-decorator="['validityPeriod']" />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-col>
        <a-col :span="6">
          <div
            class="cont-top-div"
            style="margin-left:18px;"
          >
            <h3 class="inquiry-title">报价要求</h3>
            <a-form-item
              :wrapper-col="{ span: 23 }"
              label="询价方式"
            >
              <a-select
                @change="handleChange"
                v-decorator="['inquiryMethod']"
                placeholder="请选择询价方式"
              >
                <a-select-option value="全平台公开">全平台公开</a-select-option>
                <a-select-option value="邀请">邀请</a-select-option>
              </a-select>
            </a-form-item>
            <a-row>
              <a-col :span="12">
                <a-form-item
                  :label-col="{ span: 8 }"
                  :wrapper-col="{ span: 16 }"
                  label="整单询价"
                >
                  <a-switch
                    checkedChildren="是"
                    unCheckedChildren="否"
                    v-decorator="['wholeInquiry']"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  :label-col="{ span: 8 }"
                  :wrapper-col="{ span: 16 }"
                  label="多次购买"
                >
                  <a-switch
                    checkedChildren="是"
                    unCheckedChildren="否"
                    v-decorator="['multiplePurchases']"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  :label-col="{ span: 8 }"
                  :wrapper-col="{ span: 16 }"
                  label="密封报价"
                >
                  <a-switch
                    checkedChildren="是"
                    unCheckedChildren="否"
                    v-decorator="['sealedOffer']"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  :label-col="{ span: 8 }"
                  :wrapper-col="{ span: 16 }"
                  label="VMI询价"
                >
                  <a-switch
                    checkedChildren="是"
                    unCheckedChildren="否"
                    v-decorator="['vmiInquiry']"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-form-item
              :wrapper-col="{ span: 23 }"
              label="描述"
            >
              <a-textarea
                placeholder="描述"
                v-decorator="['description']"
              />
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <div
        class="cont-top-div"
        style="margin-top:18px;"
      >
        <a-tabs defaultActiveKey="1">
          <a-tab-pane
            tab="物品明细"
            key="1"
          >
            <div class="table-btn">
              <a-button type="primary">物品导入</a-button>
              <a-button>模板下载</a-button>
              <a-button @click="handleAdd">新建</a-button>
              <a-button>一键设置</a-button>
              <a-button
                type="danger"
                ghost
                @click="batchDelete"
              >删除</a-button>
            </div>
            <a-table
              :rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange,fixed:true}"
              :dataSource="dataSource"
              :columns="columns"
            >
              <template
                v-for="col in ['type', 'name', 'brand','model','address','number','unit']"
                :slot="col"
                slot-scope="text, record, index"
              >
                <div :key="col">
                  <a-input
                    style="margin: -5px 0"
                    :value="text"
                    @change="e => iptChange(e.target.value, record.key, col)"
                  />
                </div>
              </template>
              <template
                slot="replacementItem"
                slot-scope="text, record, index"
              >
                <div key="replacementItem">
                  <a-switch
                    checkedChildren="开"
                    unCheckedChildren="关"
                    @change="e => switchChange(e, record.key)"
                  />
                </div>
              </template>
              <template
                slot="annex"
                slot-scope="text, record, index"
              >
                <div key="annex">
                  <a-button
                    type="primary"
                    size="small"
                  >0</a-button>
                  <a-upload
                    name="file"
                    :multiple="true"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    :headers="headers"
                    :showUploadList="false"
                    @change="updateAnnex"
                  >
                    <a-button size="small">上传文件</a-button>
                  </a-upload>
                </div>
              </template>
            </a-table>
          </a-tab-pane>
          <a-tab-pane
            tab="供应商列表"
            key="2"
          ></a-tab-pane>
        </a-tabs>
      </div>
      <div style="height:63px;"></div>
      <div class="form-btn">
        <a-button
          type="primary"
          html-type="submit"
        >保存</a-button>
        <a-button
          type="primary"
          html-type="submit"
        >保存并提交</a-button>
      </div>
    </a-form>
    <a-modal
      title="地址选择"
      v-model="visible"
      @ok="handleOk"
      :footer="null"
      :width="800"
      centered
    >
      <a-button type="primary">添加个人信息</a-button>
      <a-table
        :dataSource="dataSec"
        :columns="columnSec"
        :customRow="rowClick"
      ></a-table>
    </a-modal>
  </div>
</template>
<script>
import { setTimeout } from "timers";
export default {
  data() {
    return {
      functionNun: 0,
      form: this.$form.createForm(this),
      selectedRowKeys: [],
      dataSource: [],
      count: 0,
      columns: [
        {
          title: "平台类目",
          dataIndex: "type",
          scopedSlots: { customRender: "type" },
          width: "200px"
        },
        {
          title: "商品名称",
          dataIndex: "name",
          scopedSlots: { customRender: "name" },
          width: "200px"
        },
        {
          title: "品牌",
          dataIndex: "brand",
          scopedSlots: { customRender: "brand" },
          width: "150px"
        },
        {
          title: "型号",
          dataIndex: "model",
          scopedSlots: { customRender: "model" },
          width: "180px"
        },
        {
          title: "收货地",
          dataIndex: "address",
          scopedSlots: { customRender: "address" },
          width: "260px"
        },
        {
          title: "数量",
          dataIndex: "number",
          scopedSlots: { customRender: "number" },
          width: "110px"
        },
        {
          title: "单位",
          dataIndex: "unit",
          scopedSlots: { customRender: "unit" },
          width: "100px"
        },
        {
          title: "是否接受替换商品",
          dataIndex: "replacementItem",
          scopedSlots: { customRender: "replacementItem" },
          width: "150px"
        },
        {
          title: "附件",
          dataIndex: "annex",
          scopedSlots: { customRender: "annex" },
          width: "150px"
        }
      ],
      headers: {
        authorization: "authorization-text"
      },
      visible: false,
      dataSec: [
        {
          id: 1,
          key: 0,
          alias: "重庆",
          receiverName: "李小勇",
          phone: "15738841556",
          address: "福建 厦门市 湖里区湖里区火炬路",
          post: "201700"
        },
        {
          id: 2,
          key: 1,
          alias: "重庆",
          receiverName: "李小勇",
          phone: "15738841556",
          address: "福建 厦门市 湖里区湖里区火炬路",
          post: "201700"
        },
        {
          id: 3,
          key: 2,
          alias: "重庆",
          receiverName: "李小勇",
          phone: "15738841556",
          address: "福建 厦门市 湖里区湖里区火炬路",
          post: "201700"
        },
        {
          id: 4,
          key: 3,
          alias: "重庆",
          receiverName: "李小勇",
          phone: "15738841556",
          address: "福建 厦门市 湖里区湖里区火炬路",
          post: "201700"
        }
      ],
      columnSec: [
        {
          title: "序号",
          dataIndex: "id",
          width: "100px"
        },
        {
          title: "别名",
          dataIndex: "alias",
          width: "100px"
        },
        {
          title: "收货人",
          dataIndex: "receiverName",
          width: "100px"
        },
        {
          title: "手机号",
          dataIndex: "phone",
          width: "120px"
        },
        {
          title: "详细地址",
          dataIndex: "address",
          width: "200px"
        },
        {
          title: "邮政编码",
          dataIndex: "post",
          width: "100px"
        }
      ]
    };
  },
  methods: {
    iptChange(value, key, column) {
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.dataSource = newData;
      }
    },
    switchChange(value, key) {
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target["replacementItem"] = value;
        this.dataSource = newData;
      }
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          const rangeValue = values["inquirydeadline"];
          console.log(values);
          console.log(this.dataSource);
        }
      });
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    handleAdd() {
      const { count, dataSource } = this;
      const newData = {
        key: count,
        type: "",
        name: "",
        brand: "",
        model: "",
        address: "",
        number: "",
        unit: "",
        replacementItem: "",
        annex: ""
      };
      this.dataSource = [...dataSource, newData];
      this.count = count + 1;
    },
    updateAnnex(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
    batchDelete() {
      const dataSource = [...this.dataSource];
      const keyArr = [...this.selectedRowKeys];
      if (keyArr.length > 0) {
        keyArr.forEach(e => {
          console.log(e);
          this.dataSource = dataSource.filter(item => item.key !== e);
        });
      }
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    rowClick(e) {
      return {
        on: {
          click: () => {
            console.log(e);
          }
        }
      };
    }
  }
};
</script>
<style scoped>
.inquiryCreate-h {
  padding: 16px 27px;
  background-color: white;
  margin-bottom: 24px;
}
.table-btn button {
  margin-right: 10px;
}
.form-btn {
  width: 100%;
  position: fixed;
  bottom: 0px;
  background-color: white;
  padding: 10px 0px;
  border-top: 1px solid #e3e3ee;
  text-align: right;
  left: 0px;
  z-index: 111;
}
.form-btn button {
  margin-right: 10px;
}
.cont-top-div {
  min-height: 430px;
  padding: 24px;
  background-color: white;
}
.inquiry-title {
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 14px;
}
.ant-form-item-label {
  text-align: left !important;
}
</style>

